<template>
  <div class="source-chart-div" ref="sourceChartDiv" id="sourceChartDiv"></div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import pieEchartsOption from '@/utils/echarts/pie.js' // 引用统计图样式
  let echarts = require('echarts/lib/echarts')
  export default {
    data () {
      return {

      }
    },
    created () {
      this.getSourceCharts()
    },
    methods: {
    // 工单来源统计
    getSourceCharts () {
      this.sourceDivLoading = true
      this.$axios.post(this.$api.homeCharts.leaderSourceCharts).then(rs => {
        if (rs) {
          this.sourceListData = rs
          let sourceLegendData = this.sourceListData.map(item => ({
            name: `${item.name}`,
            value: item.value
          }))
          // console.log("333", sourceLegendData);
          this.sourceDivLoading = false
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(this.$refs.sourceChartDiv)
          if (!myChart) return
          // 绘制图表
          let colorsList = [
            '#D87A80',
            '#FFB980',
            '#E5CF0D',
            '#97B552',
            '#2EC7C9',
            '#5AB1EF',
            '#B6A2DE',
            '#AA8C8A',
            '#909399'
          ]
          let myechartsOyss = {
            title: {
              text: this.$moment().format('YYYY') + '年工单来源统计',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} ({d}%)'
            },
            color: colorsList,
            series: [
              {
                name: '工单来源',
                radius: ['0%', '60%'],
                roseType: '',
                data: sourceLegendData,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      // position: "top",
                      textStyle: {
                        fontSize: 16,
                        fontWeight: 'bolder',
                        fontFamily: 'Microsoft YaHei,微软雅黑'
                      }
                    },
                    labelLine: {
                      show: true
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myechartsOyss = pieEchartsOption(myechartsOyss)
          myChart.setOption(myechartsOyss)
        }
      })
    }
    }
  }
</script>

<style lang='scss' scoped>
  .source-chart-div{
    width: 100%;
    height: 360px;
    padding-top: 20px;
  }
</style>
